<script setup lang="ts">
/* ===== 类型 ===== */
interface FooterLink {
  text: string
  url?: string
  icon?: string
  newWindow?: boolean
}

/* ===== props ===== */
const props = withDefaults(
  defineProps<{
    theme?: 'light' | 'dark'
    fixed?: boolean          // true=永远固定在视口底部
    copyright?: string
    links?: FooterLink[]
    icp?: string             // 备案号
    icpUrl?: string          // 备案链接
  }>(),
  {
    theme: 'light',
    fixed: false,
    copyright: `© ${new Date().getFullYear()} 潮汐智能云图库 版权所有`,
    links: () => [
      { text: '关于我们', url: '/about' },
      { text: '隐私政策', url: '/privacy' },
      { text: '使用条款', url: '/terms' },
      { text: 'Gitte', url: 'https://gitee.com/how-do-tides-and-tides-fall', icon: '🐙', newWindow: true }
    ],
    icp: '',
    icpUrl: 'https://gitee.com/how-do-tides-and-tides-fall'
  }
)

/* ===== 事件 ===== */
const emit = defineEmits<{
  linkClick: [link: FooterLink]
}>()

const onLink = (link: FooterLink) => {
  emit('linkClick', link)
  if (link.newWindow && link.url) window.open(link.url, '_blank')
}
</script>

<template>
  <footer
    class="global-footer"
    :class="[theme, { fixed }]"
  >
    <div class="footer-wrapper">
      <!-- 左侧链接 -->
      <ul class="footer-links">
        <li
          v-for="(l, idx) in links"
          :key="idx"
          class="link-item"
          @click="onLink(l)"
        >
          <i v-if="l.icon" class="link-icon">{{ l.icon }}</i>
          <span>{{ l.text }}</span>
        </li>
      </ul>

      <!-- 右侧版权 / 备案 -->
      <div class="footer-right">
        <p class="copyright">{{ copyright }}</p>
        <a
          v-if="icp"
          :href="icpUrl"
          class="icp"
          target="_blank"
          rel="noopener"
        >{{ icp }}</a>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.global-footer {
  width: 100%;
  padding: 20px 24px;
  font-size: 14px;
  background: #f5f5f5;
  color: #666;
  transition: background 0.3s, color 0.3s;
}
.global-footer.dark {
  background: #001529;
  color: #aaa;
}
.global-footer.fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.footer-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.link-item {
  cursor: pointer;
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.link-item:hover {
  color: #1890ff;
}
.link-icon {
  font-style: normal;
}
.footer-right {
  text-align: right;
  line-height: 1.6;
}
.copyright {
  margin: 0;
}
.icp {
  font-size: 12px;
  color: inherit;
  text-decoration: none;
}
.icp:hover {
  color: #1890ff;
}

/* 移动端 */
@media (max-width: 768px) {
  .footer-wrapper {
    flex-direction: column;
    text-align: center;
  }
  .footer-right {
    text-align: center;
  }
}
</style>
